<template>
  <div class="wrap" id="children2">
    <el-dialog
      title="付费明细"
      :visible.sync="state"
      @close="close"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
        <div class="top">
          <img src="" class="header" alt="">
           <div class="nam">
              <p>乔治马丁</p>
              <p>66554987</p>
           </div>
        </div>
      <el-table :data="gridData">
        <el-table-column property="date" label="日期"></el-table-column>
        <el-table-column property="project" label="付费项目"></el-table-column>
        <el-table-column property="money" label="付费金额"></el-table-column>
        <el-table-column property="payType" label="支付方式"></el-table-column>
        <el-table-column property="user" label="收款账户"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    detailState: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formLabelWidth: "140px",
      date: [],
      gridData:[
          {date:"2018-78-78",project:"房地产项目",money:50000,payType:"银行卡转账",user:"1031960596"},
          {date:"2018-78-78",project:"房地产项目",money:50000,payType:"银行卡转账",user:"1031960596"},
          {date:"2018-78-78",project:"房地产项目",money:50000,payType:"银行卡转账",user:"1031960596"},
          {date:"2018-78-78",project:"房地产项目",money:50000,payType:"银行卡转账",user:"1031960596"},
      ]
    };
  },
  computed: {
    state: {
      get() {
        return this.detailState;
      },
      set() {}
    }
  },
  methods: {
    close(v) {
      if (v) {
        this.$emit("lookDetail");
      } else {
        this.$emit("lookDetail");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 240px;
}
.header{
  width: 60px;
  height: 60px;
  background: #999;
  border-radius: 50%;
  margin-right: 15px;
}
.el-dialog {
  width: 50% !important;
}
.a {
  color: #719bef;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.top{
    display: flex;
    align-items: center;
}
.nam{
  display: flex;
  height: 60px;
  flex-direction: column;
  justify-content: space-around;
 p{
    color: #999;
    font-size: 14px;
}
}

</style>
<style lang="scss">
#children2 .el-dialog {
  width: 40% !important;
}
#children2 .el-form-item__label {
  color: #719bef;
}
</style>